<template>
	<el-dialog :model-value="visible" width="40%" :z-index="9" @close="cancel">
		<template #header>
			<div class="custom-header">政策性文件新增</div>
		</template>

		<div class="boardBox">
			<el-form ref="queryForm" label-width="120px" class="mt20" :model="queryParams" :rules="rules">
				<el-form-item label="政策性文件号：" prop="name">
					<el-input v-model="queryParams.name" placeholder="政策性文件号" clearable />
				</el-form-item>
				<el-form-item label="政策性文件名：" prop="mobile">
					<el-input v-model="queryParams.mobile" placeholder="政策性文件名" clearable />
				</el-form-item>

				<el-form-item label="附件(pdf)">
					<el-upload
						ref="uploadRef"
						class="avatar-uploader"
						name="file"
						:limit="1"
						:auto-upload="false"
						accept="application/pdf"
						action
						:multiple="false"
						:on-exceed="handleExceed"
						:file-list="filelist"
						:on-change="handleChansge"
					>
						<!-- :before-upload="beforeUpload" -->
						<el-button>上传文件</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<div class="dialog-footer">
				<el-button color="#01509f" type="primary">保存</el-button>
			</div>
		</div>

		<Invitesuccess v-model:visible="addvisible" :info="info" />
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	}
})
const editorValue = ref('<p>maku</p>')
const deptoptions = ref([])
const job_modeoptions = ref([])
const filelist = reactive([])

const queryParams = ref({ name: '', dept_id: '', position: '', hired_time: '', job_status: '', mobile: '', date: moment().format('YYYY-MM-DD') })
const emit = defineEmits<{ (event: 'update:visible', value: boolean): void; (event: 'chananniu', value: ''): void }>()
// 获取表单引用
const queryForm = ref(null)
const uploadRef = ref(null)
// 监听 localValue 的变化，通知父组件更新值
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			const data = { name: '', dept_id: '', position: '', hired_time: '', job_status: '', mobile: '', date: moment().format('YYYY-MM-DD') }
			queryParams.value = data
		}
	}
)
const info = ref({ url: '', qrcode: '' })
const addvisible = ref(false)

const rules = reactive({
	name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
	hired_time: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
	dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
	position: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
	mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
	job_status: [{ required: true, message: '请选择员工状态', trigger: 'change' }]
})
const jobstatusoptions = ref([
	{ value: 1, name: '试用' },
	{ value: 2, name: '正式' }
])
const props1 = reactive({
	checkStrictly: true,
	emitPath: false,
	multiple: false,
	value: 'id',
	label: 'name',
	children: 'children'
})

// const selectedArrRef = ref(null)
// function handleChange(value) {
// 	selectedArrRef.value.togglePopperVisible()
// }

function handleChansge(file: any) {
	let name = file.name

	// if (!/\.(pdf)$/.test(file.name)) {
	// 	ElMessage({
	// 		title: '错误',
	// 		message: '上传文件只能为pdf文件，且为pdf格式',
	// 		grouping: true,
	// 		type: 'error'
	// 	})
	// 	return false
	// }
}

function handleExceed() {
	// uploadRef.value.clearFiles()
	// nextTick(() => {
	// 	uploadRef.value.handleStart(files[0])
	// })
	// ElMessage({files, fileList
	//   title: "错误",
	//   message: `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
	//   grouping: true,
	//   type: "error",
	// });
	//     filelist.value = fileList;
}

function cancel() {
	emit('update:visible', false)
	emit('chananniu', '')
}
</script>

<style lang="scss" scoped>
.boardBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	-ms-overflow-style: none;
	scrollbar-width: none;

	.tishi {
		font-size: 14px;
		color: #999;
		background-color: #f3f8fb;
		padding: 5px 10px;
		border-radius: 6px;
	}
}
</style>
